<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue学习</title>
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.min.js"></script>
    <style>

        a{
            text-decoration: none;
        }
        a.router-link-active{
            /*   color:blue; */
            background-color: lightGray;
        }
        div.menu{
            border:1px solid gray;
            float:left;
        }
        div.menu a{
            display:block;
        }

        div.workingRoom{
            margin-left:100px;
        }

        div#app{
            width:500px;
            padding:10px;
            margin:10px auto;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="menu">
        <!--
            router-link 相当于就是超链
            to 相当于就是 href
        -->
        <router-link to="/user">用户管理</router-link>
        <router-link to="/product">产品管理</router-link>
        <router-link to="/order">订单管理</router-link>
    </div>

    <div class="workingRoom">
        <!--
            点击上面的/user,那么/user 对应的内容就会显示在router-view 这里
         -->
        <router-view></router-view>
    </div>

</div>
</body>
<script>
    /*
    * 申明三个模板( html 片段 )
    */
    var user = { template: '<p>用户管理页面的内容</p>' };
    var second = { template: '<p>产品管理页面的内容</p>' };
    var order = { template: '<p>订单管理页面的内容</p>' };
    /*
    * 定义路由
    */
    var routes = [
        { path: '/', redirect: '/user'}, // 这个表示会默认渲染 /user，没有这个就是空白
        { path: '/user', component: user },
        { path: '/product', component: second },
        { path: '/order', component: order }
    ];
    /*
    * 创建VueRouter实例
    */
    var router = new VueRouter({
        routes:routes
    });
    /*
    * 给vue对象绑定路由
    */
    new Vue({
        el:"#app",
        router
    })

</script>
</html>